<template>
    <Modal v-model="show" title="入库单SKU打印" :closable="false" :mask-closable="false" @on-visible-change="showModal" :width="800">
        <el-form :inline="true" ref="itemForm" :model="storageBill">
            <el-form-item label="打印模板" prop="templateUrl">
                <el-select v-model="templateUrl">
                    <el-option v-for="(vl,ky) in paperSizes" :key="ky" :label="ky" :value="vl">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-table size="small" :data="storageBill.items" height="350" border style="width: 100%" v-loading="loading" small>
                <el-table-column align="center" prop="variationName" fixed="left" label="规格/属性" width="180">
                </el-table-column>
                <el-table-column align="center" prop="skuCode" fixed="left" label="sku码" width="180">
                </el-table-column>
                <el-table-column prop="count" label="数量" width="280">
                    <template slot-scope="scope">
                        <el-input size="small" v-model="scope.row.count"></el-input>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
        <div slot="footer">
            <el-button size="small" @click="cancel">取消</el-button>
            <el-button size="small" type="primary" :loading="modalLoading" @click="ok">确定</el-button>
        </div>
    </Modal>
</template>
<script>
import api from "@/api/api"

export default {
    name: 'StorageProduct',
    data() {
        return {
            paperSizes: {
                "70mm*50mm": api.skuTemplateUrl_70_50,
                "60mm*40mm": api.skuTemplateUrl_60_40,
                "40mm*30mm": api.skuTemplateUrl_40_30,
                "70mm*30mm": api.skuTemplateUrl_70_30,
                "70mm*30mm(不含条码)": api.skuTemplateUrl_70_30_NoSku,
                "70mm*30mm(加粗不含条码)": api.skuTemplateUrl_70_30_NoSku_Cu,
                "70mm*30mm(二维码)":api.skuTemplateUrl_70_30_QRCODE
            },
            templateUrl: api.skuTemplateUrl_70_50,
            loading: false,
            show: false,
            storageBill: {
                items: [],

            },
            modalLoading: false


        };
    },
    mounted: function() {



    },
    props: [
        'billId'
    ],
    methods: {
        hideDialog() {
            this.modalLoading = false;
            this.show = false;
        },
        showDialog() {
            this.show = true;
        },
        showModal: function(value) {
            if (value) {
                this.getDetail();
            } else {
                this.storageBill = {
                    items: []
                };
            }
        },
        getDetail() {
            this.loading = true;
            this.$http.post("/storagebill/printSku.do", { id: this.billId }).then(res => {
                this.loading = false;
                if (res.status == 0) {
                    this.storageBill = res.obj;
                }
            }, response => {

            });
        },
        ok: function() {
            let orderData = [];
            for (var i = 0; i < this.storageBill.items.length; i++) {
                let item = this.storageBill.items[i];
                if (item.count > 0) {
                    for (var j = 1; j <= item.count; j++) {
                        orderData.push({
                            "documentID": this.storageBill.id + "-" + item.productId + "-" + j,
                            "contents": [{
                                data: {
                                    shippingNo: localStorage.shippingNo,
                                    variationName: item.variationName,
                                    skuCode: item.skuCode
                                },
                                templateURL: this.templateUrl

                            }]
                        });
                    }
                }
            }
            if (orderData.length <= 0) {
                this.errorMessage("请先选择要打印的箱号");
                return;
            }
            this.$emit("boxCallBack", orderData);
        },
        cancel: function() {
            this.hideDialog();
            this.$emit("cancel");
        }
    }
}
</script>
<style scoped>
</style>